var pages = document.querySelectorAll(".section");
var web = document.querySelector(".web");
var len = document.documentElement.clientHeight;
var fullpage = document.getElementById("fullpage");
let see_more = document.querySelector(".see_more");
let sect3_bottom = document.querySelector(".sect3_bottom");

// 全屏滚动
web.style.height = len + "px";
for (var i = 0; i < pages.length; i++) {
  pages[i].style.height = len + "px";
}
if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
  // Firefox 3.5+
  document.addEventListener("DOMMouseScroll", scrollFun);
} else if (document.addEventListener) {
  document.addEventListener("mousewheel", scrollFun, {
    passive: true,
  });
} else if (document.attachEvent) {
  // ie6 7 8 用的是attachEvent
  document.attachEvent("onmousewheel", scrollFun);
} else {
  document.onmousewheel = scrollFun;
}
var startTime = 0;
var endTime = 0;
var now = 0;
let nav_box = document.querySelector(".nav_box");
let search_a = nav_box.querySelector(".search a");
let nav_a = nav_box.querySelectorAll(".nav li > a");

// 鼠标滚轮执行事件
function scrollFun(e) {
  startTime = new Date().getTime();
  var event = e || window.event;
  var dir = event.detail || event.wheelDelta;
  if (startTime - endTime > 1000) {
    if (dir < 0 && now < pages.length) {
      now++;
      if (now == pages.length) {
        see_more.style.display = "none";
        fullpage.style.top = `-${sect3_bottom.clientHeight}px`;
      } else {
        fullpage.style.transform = `translateY(-${now}00%)`;
      }
      endTime = new Date().getTime();
    } else if (dir > 0 && now > 0) {
      now--;
      if (now == pages.length - 1) {
        fullpage.style.top = 0;
      } else {
        fullpage.style.transform = `translateY(-${now}00%)`;
      }
      endTime = new Date().getTime();
      see_more.style.display = "block";
    }
    if (now >= 2) {
      nav_box.style.backgroundColor = "#fff";
      search_a.style.color = "#000";
      [...nav_a].forEach(function (obj) {
        obj.style.color = "#000";
      });
    } else {
      nav_box.style.backgroundColor = "transparent";
      search_a.style.color = "#fff";
      [...nav_a].forEach(function (obj) {
        obj.style.color = "#fff";
      });
    }
  } else {
    // event.preventDefault();
  }
  window.addEventListener("resize", function () {
    len = document.documentElement.clientHeight;
    web.style.height = len + "px";
    for (var i = 0; i < pages.length; i++) {
      pages[i].style.height = len + "px";
    }
  });
}

// 查看更多
see_more.addEventListener("click", () => {
  startTime = new Date().getTime();
  if (startTime - endTime > 1000) {
    if (now < pages.length - 1) {
      now++;
      fullpage.style.transform = `translateY(-${now}00%)`;
    } else {
      now++;
      fullpage.style.top = `-${sect3_bottom.clientHeight}px`;
      see_more.style.display = "none";
    }
    endTime = new Date().getTime();
  }
});

// 第一屏轮播
let section1 = document.querySelector(".section1");
let swiper1 = section1.querySelector(".swiper");
let point1 = section1.querySelector(".point");
mySwiper(swiper1, point1);

// 第二屏轮播
let section2 = document.querySelector(".section2");
let swiper2 = section2.querySelector(".swiper");
let point2 = section2.querySelector(".point");
let swiper_small2 = section2.querySelector(".swiper_small");
let swiper_left2 = section2.querySelector(".swiper_left");
let swiper_right2 = section2.querySelector(".swiper_right");
let current_num = 0;
let timer2 = null;

// 生成小点
for (let i = 0; i <= swiper2.childElementCount - 1; i++) {
  point2.appendChild(document.createElement("li"));
}
point2.firstElementChild.classList.add("active");

// 自动轮播
auto_carousel();
function auto_carousel() {
  timer2 = setInterval(() => {
    if (++current_num >= swiper2.childElementCount) {
      current_num = 0;
    }
    point_fn();
    swiper2_fn();
    swiper_left_fn();
    swiper_right_fn();
  }, 3000);
}

// 小点的点击事件
[...point2.children].forEach((point_obj, idx) => {
  point_obj.addEventListener("click", () => {
    current_num = idx;
    clearInterval(timer2);
    point_fn();
    swiper2_fn();
    auto_carousel();
    swiper_left_fn();
    swiper_right_fn();
  });
});

// 鼠标放在缩略图的事件
[...swiper_small2.children].forEach((small_obj) => {
  small_obj.addEventListener("mouseenter", () => {
    current_num = parseInt(small_obj.getAttribute("data-index"));
    point_fn();
    swiper2_fn();
    clearInterval(timer2);
    swiper_left_fn();
    swiper_right_fn();
  });
});

// 鼠标移出缩略图的事件
[...swiper_small2.children].forEach((small_obj) => {
  small_obj.addEventListener("mouseleave", () => auto_carousel());
});

// 选中小圆点
function point_fn() {
  [...point2.children].forEach((point_obj) =>
    point_obj.classList.remove("active")
  );
  point2.children[current_num].classList.add("active");
}

// 选中轮播图片
function swiper2_fn() {
  [...swiper2.children].forEach((obj) => obj.classList.remove("active"));
  swiper2.children[current_num].classList.add("active");
}

// 轮播左边内容
function swiper_left_fn() {
  [...swiper_left2.children].forEach((obj) => obj.classList.remove("active"));
  swiper_left2.children[current_num].classList.add("active");
}

// 轮播右边内容
function swiper_right_fn() {
  swiper_right2.children[0].textContent = "0" + (current_num + 1);
}

// 第三屏中的第一屏
let section3 = document.querySelector(".section3");
let swiper3 = section3.querySelector(".swiper");
let point3 = section3.querySelector(".point");
let swiper3_ul = section3.querySelector(".bg_img_box ul");
mySwiper(swiper3, point3, true, swiper3_ul);

// 团购定制
let group_buy = document.querySelector(".group_buy");
let dialog_box = document.querySelector(".dialog_box");
let dial_close = dialog_box.querySelector(".close");
let dial_mark = dialog_box.querySelector(".mark");

group_buy.addEventListener("click", function () {
  dialog_box.classList.add("active");
});
dial_close.addEventListener("click", function () {
  dialog_box.classList.remove("active");
});
dial_mark.addEventListener("click", function () {
  dialog_box.classList.remove("active");
});

// 搜索按钮
let search = document.querySelector(".search");
let header_box = document.querySelector("header");
let sear_close = document.querySelector(".sear_close");
search.addEventListener("click", function () {
  header_box.classList.toggle("active");
});
sear_close.addEventListener("click", function () {
  header_box.classList.remove("active");
});
